<template>
  <div class="page">
    <div class="form-wrapper" v-loading="loading">
      <el-form
        ref="form"
        label-width="100px"
        label-position="left"
        :rules="rules"
        :model="form"
      >
        <el-form-item label="店铺名称：" prop="firmName">
          <el-input
            type="text"
            v-model="form.firmName"
            placeholder="请输入店铺名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="企业类型：" prop="firmType">
          <el-select
            v-model="form.firmType"
            placeholder="请选择"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in firmTypeArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主营业务：" prop="mainBusiness">
          <el-input
            type="text"
            v-model="form.mainBusiness"
            placeholder="请输入主营业务"
          ></el-input>
        </el-form-item>
        <el-form-item label="服务区域：" prop="areaValue">
          <el-cascader
            ref="areaCascader1"
            :props="prop"
            v-model="form.areaValue"
            :options="areaList"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="店铺图片：" prop="firmImgs" style="margin-bottom: 20px">
          <ImageUpload :imgSrc="require('@/assets/img/icon-upload2.png')" v-model="form.firmImgs"></ImageUpload>
        </el-form-item>
      </el-form>

      <el-button type="primary" class="submit-btn" @click="submit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { getFirmInfo, editFirm } from "@/api/user.js";
import { firmType, const2Arr } from "@/consts/index.js";
import { getCity } from "@/api/common.js";
export default {
  name: "shopInfo",

  data() {
    return {
      loading: false,
      firmType,
      firmTypeArr: const2Arr(firmType),
      form: {
        areaValue: "",
      },
      rules: {
        mainBusiness: [{ required: true, message: "主营业务不能为空", trigger: "blur" }],
        areaValue: [{ required: true, message: "服务区域不能为空", trigger: "blur" }],
        firmName: [{ required: true, message: "店铺名称不能为空", trigger: "blur" }],
        firmType: [{ required: true, message: "企业类型不能为空", trigger: "blur" }],
        firmImgs: [
          { required: true, message: "营业执照不能为空", trigger: "blur" },
        ],
      },
      areaList: [],
      prop: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          const nodes = [];
          setTimeout(() => {
            // 构造查询条件
            let query = {
              p_code: node.value,
              level: node.level + 2,
            };
            //查询接口
            getCity(query).then((res) => {
              res.result.map((item) => {
                let obj = {
                  value: item.code,
                  label: item.name,
                  leaf: item.level == 4, // 节点级别，如果没有子节点就停止查询
                };
                nodes.push(obj);
              });
              //重新加载节点
              resolve(nodes);
            });
          }, 100);
        },
      },
    };
  },
  created() {
    this.getCity();
    this.getFirmInfo();
  },
  methods: {
    getCity() {
      getCity({ level: 2, p_code: "" }).then((res) => {
        this.areaList = res.result.map((item) => ({
          value: item.code,
          label: item.name,
        }));
      });
    },
    getCheckedNodes() {
      return this.$refs.areaCascader1.getCheckedNodes();
    },
    getFirmInfo() {
      this.loading = true
      getFirmInfo().then((res) => {
        this.form = res.result;
        this.$set(this.form, 'areaValue', [this.form.provinceId, this.form.cityId, this.form.areaId])
        this.loading = false;
      });
    },
    submit() {
      
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;
          const allNodes = this.getCheckedNodes()[0].pathNodes;
          this.form.provinceId = allNodes[0].value;
          this.form.province = allNodes[0].label;
          this.form.cityId = allNodes[1].value;
          this.form.city = allNodes[1].label;
          this.form.areaId = allNodes[2].value;
          this.form.area = allNodes[2].label;

          const {
					id,
					firmName,
					firmType,
					mainBusiness,
					provinceId,
					province,
					cityId,
					city,
					areaId,
					area,
					serviceArea,
					firmImgs
				} = this.form


				editFirm({
					firmId: id,
					firmName,
					firmType,
					mainBusiness,
					provinceId,
					province,
					cityId,
					city,
					areaId,
					area,
					serviceArea,
					firmImgs
				}).then(res => {
					this.$modal.msgSuccess('编辑成功')
          this.loading = false;
				})
        }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  justify-content: center;
}

.form-wrapper {
  padding: 50px 0;

  ::v-deep .el-form-item__label {
    line-height: 56px;
    font-size: 18px;
    width: 120px;
  }

  // 设置文本框长度
  ::v-deep .el-input__inner {
    width: 548px;
    height: 56px;
    font-size: 18px;
  }
}

.submit-btn {
  width: 548px;
  height: 60px;
  border-radius: 10px;
  font-size: 20px;
  margin-top: 100px;
}
</style>
